<!-- eslint-disable vue/multi-word-component-names -->
<!-- 智能检测页面 -->
<template>
    <div class="box">
        <div class="head">
            <ul class="head-1">
                <li>
                    <h3 class="title">检测人员姓名:</h3>
                    <input type="text" placeholder="输入学生姓名" class="input">
                </li>
                <li>
                    <h3 class="title">检测区域:</h3>
                    <select class="input">
                        <option>招生办</option>
                        <option>中原市场部</option>
                        <option>春峰市场部</option>
                        <option>邯郸市场部</option>
                    </select>
                </li>
                <li>
                    <h3 class="title">环境监测:</h3>
                    <select class="input">
                        <option>游戏学院</option>
                        <option>网站学院</option>

                    </select>
                </li>
                <li>
                    <h3 class="title">用水检测:</h3>
                    <select class="input">
                        <option>北京</option>
                        <option>天津</option>
                        <option>广州</option>
                        <option>杭州</option>
                    </select>
                </li>
                <li>
                    <el-button class="primary1">查询</el-button>
                </li>
            </ul>
            <div>

            </div>
            <div class="primary2">
                <el-button class="primary">新增检测人员</el-button>
                <el-button class="primary">批量删除</el-button>
            </div>
        </div>
        <div class="box-2">
            <el-table :data="tableData" style="width: 100%" max-height="450">
                <el-table-column type="selection" width="80" />
                <el-table-column prop="ID" label="ID" width="190" />
                <el-table-column prop="name" label="检测人员" width="190" />
                <el-table-column prop="state" label="检测实时图" width="190" />
                <el-table-column prop="city" label="检测区域" width="190" />
                <el-table-column prop="address" label="环境检测状态" width="190" />
                <el-table-column prop="zip" label="用水测试" width="190" />
                <el-table-column fixed="right" label="Operations" width="300">
                    <template #default="scope">
                        <el-button type="primary">查看</el-button>
                        <el-button type="primary">编辑</el-button>
                        <el-button type="primary" @click.prevent="deleteRow(scope.$index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button class="mt-4" style="width: 100%" @click="onAddItem">Add Item</el-button>
        </div>
        <div class="box-foot">
            <el-pagination background layout="prev, pager, next" :total="100" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// import dayjs from 'dayjs'

const now = new Date()

const tableData = ref([
    {
        ID: '35',
        name: '张三',
        state: '1',
        city: '报告厅',
        address: '良好',
        zip: '18L',
    },
    {
        ID: '24',
        name: '李四',
        state: '1',
        city: '2教学楼',
        address: '良好',
        zip: '10L',
    },
    {
        ID: '67',
        name: '王五',
        state: '1',
        city: '宿舍楼',
        address: '良好',
        zip: '30L',
    },
])

const deleteRow = (index: number) => {
    tableData.value.splice(index, 1)
}

const onAddItem = () => {
    now.setDate(now.getDate() + 1)
    tableData.value.push({
        ID: '11',
        name: '老三',
        state: '2',
        city: '7宿舍楼',
        address: '优秀',
        zip: '12L',
    })
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
}


.head {
    padding: 20px;
}

.box-foot {
    float: right;
    padding: 20px;
}

.primary {
    background-color: #4060c7;
    color: #fff;
    height: 40px;
}

.primary2 {
    padding: 30px;
}

.primary1 {
    background-color: #4060c7;
    color: #fff;
    height: 40px;
}

.head li {
    width: 270px;
    height: 60px;
    text-align: center;
    line-height: 50px;
    margin-left: 50px;
}

.head-1 {
    display: flex;
}

.title {
    float: left;
}

.input {
    width: 140px;
    height: 35px;
    margin-top: 5px;
}
</style>